<template>
  <el-container class="goods-edit">
    <el-header>
      <el-tabs
        class="sa-m-t-10"
        v-model="stepActive"
        @tab-click="isValidate"
      >
        <el-tab-pane :name="0">
          <template #label>
            <div
              class="sa-flex"
              :class="validateData['0'] ? 'is-error' : ''"
            >
              基本信息
              <el-icon
                v-if="validateData['0']"
                class="sa-m-l-5"
              >
                <warning-filled />
              </el-icon>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane :name="1">
          <template #label>
            <div
              class="sa-flex"
              :class="validateData['1'] ? 'is-error' : ''"
            >
              服务项目
              <el-icon
                v-if="validateData['1']"
                class="sa-m-l-5"
              >
                <warning-filled />
              </el-icon>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane :name="2">
          <template #label>
            <div
              class="sa-flex"
              :class="validateData['2'] ? 'is-error' : ''"
            >
              图文详情
              <el-icon
                v-if="validateData['2']"
                class="sa-m-l-5"
              >
                <warning-filled />
              </el-icon>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane :name="3">
          <template #label>
            <div
              class="sa-flex"
              :class="validateData['3'] ? 'is-error' : ''"
            >
              购买须知
              <el-icon
                v-if="validateData['3']"
                class="sa-m-l-5"
              >
                <warning-filled />
              </el-icon>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-header>
    <el-main class="sa-p-t-10">
      <el-form
        :model="form.model"
        :rules="form.rules"
        ref="formRef0"
        label-width="100px"
      >
        <div v-show="stepActive === 0">
          <el-form-item
            label="标签"
            prop="category_id"
          >
            <el-select
              multiple
              v-model="form.model.tag_id"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in state.tagList"
                :key="item.id"
                :label="item.tag_name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="特价团"
            prop="bargain_price"
            required
          >
            <el-switch
              v-model="form.model.bargain_price"
              active-value="1"
              active-text="参与"
              inactive-value="2"
              inactive-text="不参与"
            >
            </el-switch>
          </el-form-item>
          <el-form-item
            label="服务分类"
            prop="category_id"
          >
            <el-cascader
              v-model="form.model.category_id"
              :props="{
              value: 'id',
              label: 'title',
              emitPath: false,
            }"
              :options="state.categoryList"
            />
          </el-form-item>
          <el-form-item
            label="服务名称"
            prop="title"
          >
            <el-input
              v-model="form.model.title"
              placeholder="请输入服务名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="服务主图"
            prop="image"
          >
            <sa-uploader
              v-model="form.model.image"
              fileType="image"
            ></sa-uploader>
          </el-form-item>
          <el-form-item
            label="原价(元)"
            prop="original_price"
          >
            <el-input
              v-model="form.model.original_price"
              placeholder="请输入原价(元)"
            ></el-input>
          </el-form-item>
          <el-form-item label="折扣">
            <el-radio-group v-model="form.model.is_discount">
              <el-radio value="1">有折扣</el-radio>
              <el-radio value="0">无折扣</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.model.is_discount === '1'">
            <el-input
              style="width: 100px;margin-right: 10px"
              v-model="form.model.discount"
              placeholder="折扣"
            ></el-input>
            <div>折</div>
          </el-form-item>
          <el-form-item label="现价(元)">
            <el-input
              v-model="price"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="限购">
            <el-radio-group v-model="form.model.is_limit">
              <el-radio value="1">限购</el-radio>
              <el-radio value="0">不限购</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.model.is_limit === '1'">
            <div>每人限购</div>
            <el-input
              style="width: 80px;margin: 0 10px;"
              type="number"
              v-model="form.model.limit_num"
              placeholder=""
            ></el-input>
            <div>张</div>
          </el-form-item>
          <el-form-item
            label="库存"
            prop="stocks"
          >
            <el-input
              :disabled="props.modal.params.type === 'edit'"
              v-model="form.model.stocks"
              placeholder="请输入库存"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="是否展示" prop="display_pet">
            <el-switch v-model="form.model.display_pet" active-value="enable" inactive-value="disable">
            </el-switch>
          </el-form-item> -->
          <!-- <template v-if="form.model.display_pet=='enable'">
            <el-form-item label="适用宠物" prop="apply">
              <el-input maxlength="2000" v-model="form.model.apply" placeholder="请输入适用宠物"></el-input>
            </el-form-item>
            <el-form-item label="适用毛长" prop="hair">
              <el-select v-model="form.model.hair" placeholder="请选择适用毛长">
                <el-option
                  v-for="(item,index) in state.hairList"
                  :key="index"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="适用体重" prop="weight">
              <el-input v-model="form.model.weight" placeholder="请输入适用体重(kg)"></el-input>
            </el-form-item>
          </template> -->

          <el-form-item label="商品状态">
            <el-radio-group v-model="form.model.status">
              <el-radio value="up">上架</el-radio>
              <el-radio value="down">下架</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
      <el-form
        :model="form.model"
        :rules="form.rules"
        ref="formRef1"
      >
        <div v-show="stepActive === 1">
          <div class="service-box">
            <el-button
              type="primary"
              @click="addProduct"
              class="sa-m-b-10"
            >
              添加
            </el-button>
            <div
              class="service-box-item sa-m-b-20"
              v-for="(item,index) in state.product_list"
              :key="index"
            >
              <div class="service-title sa-flex sa-row-between sa-col-center">
                <el-form-item
                  label="服务概括"
                  style="margin-bottom: 0"
                >
                  <el-input
                    v-model="item.server_content"
                    placeholder="请输入服务概括"
                  ></el-input>
                </el-form-item>
                <el-button
                  link
                  type="danger"
                  @click="deleteProduct(index)"
                >
                  删除
                </el-button>
              </div>
              <div class="service-content sa-flex sa-col-top">
                <div class="service-left">
                  <el-form-item label="项目概括">
                    <el-input
                      v-model="item.product_content"
                      placeholder="请输入项目概括"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="service-right">
                  <div class="sa-flex sa-row-between sa-col-center sa-m-b-10">
                    <el-form-item style="margin-bottom: 0">
                      <el-radio-group
                        v-model="item.product_style"
                        @change="onchangeProduct(index)"
                      >
                        <el-radio value="2">项目样式</el-radio>
                        <el-radio value="1">流程样式</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-button
                      link
                      type="primary"
                      @click="addProductItem(index)"
                    >
                      新增
                    </el-button>
                  </div>
                  <div
                    class="service-right-1 sa-m-b-20 "
                    v-for="(value,page) in item.product_list"
                    :key="page"
                  >
                    <div
                      v-if="item.product_style === '1'"
                      class="sa-flex sa-row-between sa-col-center"
                    >
                      <el-form-item
                        style="margin-bottom: 0"
                        class="sa-width-350"
                        label="项目组"
                      >
                        <el-input
                          v-model="value.group"
                          placeholder="请输入项目组"
                        ></el-input>
                      </el-form-item>
                      <el-button
                        link
                        type="primary"
                        @click="addProductItem2(value)"
                      >
                        新增
                      </el-button>
                    </div>

                    <div
                      class="sa-p-5 sa-m-t-10 sa-m-b-10"
                      v-for="(i,ind) in value.list"
                      :key="ind"
                      style="border:1px dashed #ccc"
                    >
                      <div class="sa-flex sa-row-between sa-col-center sa-m-b-18 sa-m-t-18">
                        <el-form-item
                          label="项目名称"
                          style="margin-bottom: 0;flex: 1"
                        >
                          <el-input
                            v-model="i.name"
                            placeholder="请输入项目名称"
                          ></el-input>
                        </el-form-item>
                        <div class="service-right-1-name sa-flex sa-m-l-20">
                          <el-input
                            type="number"
                            v-model="i.num"
                            v-integer
                          ></el-input>
                          <div class="sa-m-l-10">份</div>
                        </div>
                      </div>
                      <el-form-item label="项目价格">
                        <el-input
                          v-model="i.price"
                          placeholder="请输入项目价格"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="项目描述">
                        <el-input
                          type="textarea"
                          v-model="i.describe"
                          placeholder="请输入项目描述"
                        ></el-input>
                      </el-form-item>
                      <div class="sa-flex sa-row-right sa-col-center">
                        <el-button
                          link
                          type="primary"
                          v-if="ind !== 0"
                          @click="onMoveUp2(index,page,ind)"
                        >
                          上移
                        </el-button>
                        <el-button
                          link
                          type="primary"
                          v-if="ind !== value.list.length-1"
                          @click="onMoveDown2(index,page,ind)"
                        >
                          下移
                        </el-button>
                        <el-button
                          link
                          type="primary"
                          v-if="state.product_list[index].product_list[page].list.length>1"
                          @click="deleteProductChildren2(index,page,ind)"
                        >
                          删除
                        </el-button>
                      </div>
                    </div>

                    <div class="sa-flex sa-row-right sa-col-center">
                      <el-button
                        link
                        type="primary"
                        v-if="page !== 0"
                        @click="onMoveUp(index,page)"
                      >
                        上移
                      </el-button>
                      <el-button
                        link
                        type="primary"
                        v-if="page!==item.product_list.length-1"
                        @click="onMoveDown(index,page)"
                      >
                        下移
                      </el-button>
                      <el-button
                        link
                        type="primary"
                        @click="deleteProductChildren(index,page)"
                      >
                        删除
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-form-item
              label="项目注明"
              prop="explain"
              v-if="state.product_list.length >= 1"
            >
              <el-input
                maxlength="2000"
                type="textarea"
                v-model="form.model.explain"
                placeholder="请输入项目注明"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-form
        :model="form.model"
        :rules="form.rules"
        ref="formRef2"
        label-width="100px"
      >
        <div v-show="stepActive === 2">
          <el-form-item label="图文详情">
            <div>
              <sa-editor v-model:content="form.model.details"></sa-editor>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <el-form
        :model="form.model"
        :rules="form.rules"
        ref="formRef3"
        label-width="100px"
      >
        <div v-show="stepActive === 3">
          <el-form-item
            label="有效期"
            prop="validity"
          >
            <el-input
              class="sa-m-r-10"
              style="width: 100px;"
              v-model="form.model.validity"
              placeholder="有效期"
            ></el-input>
            <div style="color: #0f0120;font-size: 12px">购买后{{ form.model.validity }}天内有效</div>
          </el-form-item>
          <el-form-item
            label="预约信息"
            prop="subscribe"
          >
            <el-input
              class="sa-m-r-10"
              style="width: 100px;"
              v-model="form.model.subscribe"
              placeholder=""
            ></el-input>
            <div style="color: #0f0120;font-size: 12px">提前{{ form.model.subscribe }}小时预约</div>
          </el-form-item>
        </div>
      </el-form>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button
        v-if="props.modal.params.type === 'add'"
        v-auth="'seller.admin.groupgoods.add'"
        type="primary"
        @click="confirm"
      >保存
      </el-button>
      <el-button
        v-if="props.modal.params.type === 'edit'"
        v-auth="'seller.admin.groupgoods.edit'"
        type="primary"
        @click="confirm"
      >更新
      </el-button>
    </el-footer>
  </el-container>
</template>
<script setup>
import { onMounted, reactive, ref, computed, nextTick, getCurrentInstance } from 'vue';
import { useModal } from '@/sheep/hooks';
import { api } from './groupGoods.service';
import { cloneDeep } from 'lodash';
import SaEditor from '@/sheep/components/sa-editor/sa-editor.vue';
import { api as tagApi } from '../tag/tag.service';

const { proxy } = getCurrentInstance();

const emit = defineEmits(['modalCallBack']);
const props = defineProps({
  modal: {
    type: Object,
  },
});
let formRef = ref(null);
const form = reactive({
  model: {
    bargain_price: false,
    category_id: '',
    title: '',
    image: '',
    original_price: '',
    is_discount: '0',
    discount: '',
    is_limit: '0',
    limit_num: '',
    apply: '',
    hair: '',
    weight: '',
    status: 'up',
    details: '',
    validity: '',
    subscribe: '',
    stocks: '',
    explain: '',
    display_pet: 'disable'
  },
  rules: {
    tag_id: [{ required: true, message: '请选择标签', trigger: 'change' }],

    category_id: [{ required: true, message: '请选择服务分类', trigger: 'change' }],
    title: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
    original_price: [{ required: true, message: '请输入原价(元)', trigger: 'blur' }],
    is_limit: [{ required: true, message: '请选择限购', trigger: 'change' }],
    // apply: [{ required: true, message: '请输入适用宠物', trigger: 'blur' }],
    hair: [{ required: true, message: '请选择适用毛长', trigger: 'change' }],
    weight: [{ required: true, message: '请输入适用体重', trigger: 'blur' }],
    validity: [{ required: true, message: '请输入有效期', trigger: 'blur' }],
    subscribe: [{ required: true, message: '请输入提前预约时间', trigger: 'blur' }],
    stocks: [{ required: true, message: '请输入库存', trigger: 'blur' }],
  },
});

// 计算现价
const price = computed(() => {
  if (form.model.is_discount === '1') {
    const discountRate = form.model.discount * 0.1;
    return (form.model.original_price * discountRate).toFixed(2);
  }
  return '0';
});

// 服务分类 + 毛长分类
const state = reactive({
  categoryList: [],
  hairList: [],
  product_list: [{ list: [{ name: '', num: '', describe: '' }] }],
  tagList: []
});

async function getTagList () {
  const { error, data } = await tagApi.list({ page: 1, list_rows: 1000, status: 1 })
  state.tagList = data.data
}

//步骤条
const stepActive = ref(0);
const validateData = ref({
  0: 0,
  1: 0,
  2: 0,
  3: 0,
});
function numFun (val) {
  console.log(val);

  let formatted = val.toString().replace(/[^\d.]/g, '')      // 过滤非法字符
    .replace(/^0+(\d)/, '$1')      // 去除多余前导0
    .replace(/^\./, '0.')          // 首位不能是 .
    .replace(/(\.\d{2})\d+/, '$1') // 限制两位小数
  val = formatted
}

onMounted(async () => {
  await getTagList()

  if (props.modal.params.type === 'edit') {
    init();
  }
  await getCategoryList();
  await getHairList();
});


const init = async () => {
  const { error, data } = await api.details(props.modal.params.id);
  if (error === 0) {
    form.model.category_id = data.category_id;
    form.model.title = data.title;
    form.model.image = data.image;
    form.model.original_price = data.original_price;
    form.model.is_discount = String(data.is_discount.value);
    form.model.discount = data.discount;
    form.model.is_limit = String(data.is_limit.value);
    form.model.limit_num = data.limit_num;
    form.model.apply = data.apply;
    form.model.hair = data.hair;
    form.model.weight = data.weight;
    form.model.status = String(data.status.value);
    form.model.details = data.details;
    form.model.validity = data.validity;
    form.model.subscribe = data.subscribe;
    form.model.stocks = data.stocks;
    form.model.explain = data.explain;
    state.product_list = data.product_list;
    form.model.bargain_price = data.bargain_price

    if (data.tag_id) {
      form.model.tag_id = data.tag_id.split(',').map(item => Number(item))
    }
  }
};

function isValidate () {
  nextTick(async () => {
    for (const key in validateData.value) {
      await proxy.$refs[`formRef${key}`].validate((valid) => {
        if (valid) {
          validateData.value[key] = 0;
        } else {
          validateData.value[key] = 1;
        }
      });
    }
  });
}

function confirm () {
  isValidate();
  setTimeout(async () => {
    if (validateData.value[0] === 0 && validateData.value[3] === 0) {
      let submitForm = cloneDeep(form.model);

      submitForm.tag_id = submitForm.tag_id.join(',')
      const { error } =
        props.modal.params.type === 'add'
          ? await api.add({
            ...submitForm,
            product_list: state.product_list,
          })
          : await api.edit(props.modal.params.id, {
            ...submitForm,
            product_list: state.product_list,
          });
      if (error === 0) {
        emit('modalCallBack', {
          event: 'confirm',
        });
      }
    }
  }, 500);
}

// 切换样式重置子类
const onchangeProduct = (index) => {
  const productStyle = state.product_list[index].product_style;
  const productChildren = productStyle === '1'
    ? { group: '', list: [{ name: '', num: '', describe: '' }], describe: '' }
    : { name: '', num: '', list: [{ name: '', num: '', describe: '' }], describe: '' };
  state.product_list[index].product_list = [productChildren];
};

// 添加父类
const addProduct = () => {
  let product_item = {
    'server_content': '',
    'product_content': '',
    'product_style': '2',
    'product_list': [
      {
        'name': '',
        'num': '',
        'describe': '',
      },
    ],
  };
  state.product_list.push(product_item);
};

// 删除父类
const deleteProduct = (index) => {
  state.product_list.splice(index, 1);
};

// 添加子类
const addProductItem = (index) => {
  const productStyle = state.product_list[index].product_style;
  const productChildren = productStyle === '1'
    ? { group: '', name: '', num: '', list: [{ name: '', num: '', describe: '' }], describe: '' }
    : { name: '', num: '', describe: '', list: [{ name: '', num: '', describe: '' }] };
  state.product_list[index].product_list.push(productChildren);
};
// 添加子类2
const addProductItem2 = (item) => {
  item.list.unshift({ name: '', num: '', describe: '' })
};

// 删除服务子类
const deleteProductChildren = (index, page) => {
  state.product_list[index].product_list.splice(page, 1);
};

// 子类上移
const onMoveUp = (index, page) => {
  const temp = cloneDeep(state.product_list[index].product_list[page]);
  const topTemp = cloneDeep(state.product_list[index].product_list[page - 1]);
  state.product_list[index].product_list.splice(page - 1, 1, temp);
  state.product_list[index].product_list.splice(page, 1, topTemp);
};

// 子类下移
const onMoveDown = (index, page) => {
  const temp = cloneDeep(state.product_list[index].product_list[page]);
  const topTemp = cloneDeep(state.product_list[index].product_list[page + 1]);
  state.product_list[index].product_list.splice(page + 1, 1, temp);
  state.product_list[index].product_list.splice(page, 1, topTemp);
};

// 删除服务子类--流程样式里的小新增项
const deleteProductChildren2 = (index, page, ind) => {
  if (state.product_list[index].product_list[page].list.length > 1) {
    state.product_list[index].product_list[page].list.splice(ind, 1);
  }

};

// 子类上移--流程样式里的小新增项
const onMoveUp2 = (index, page, ind) => {
  const temp = cloneDeep(state.product_list[index].product_list[page].list[ind]);
  const topTemp = cloneDeep(state.product_list[index].product_list[page].list[ind - 1]);
  state.product_list[index].product_list[page].list.splice(ind - 1, 1, temp);
  state.product_list[index].product_list[page].list.splice(ind, 1, topTemp);
};

// 子类下移--流程样式里的小新增项
const onMoveDown2 = (index, page, ind) => {
  const temp = cloneDeep(state.product_list[index].product_list[page].list[ind]);
  const topTemp = cloneDeep(state.product_list[index].product_list[page].list[ind + 1]);
  console.log(temp);
  console.log(topTemp);

  state.product_list[index].product_list[page].list.splice(ind + 1, 1, temp);
  state.product_list[index].product_list[page].list.splice(ind, 1, topTemp);
};

const getCategoryList = async () => {
  const { error, data } = await api.categoryList();
  if (error === 0) {
    state.categoryList = data;
  }
};

const getHairList = async () => {
  const { error, data } = await api.hair_list();
  if (error === 0) {
    state.hairList = data;
  }
};
</script>
<style lang="scss" scoped>
.goods-edit {
  .el-header {
    --el-header-height: fit-content;
  }

  .goods-type {
    width: 140px;
    height: 56px;
    border: 1px solid rgb(230, 230, 230);
    border-radius: 4px;
    margin-left: 16px;
    cursor: pointer;

    &.is-active {
      border: 1px solid var(--el-color-primary);
    }
  }

  .is-error {
    color: #ff4d4f;
  }
}

.goods-edit {
  .oper {
    :deep() {
      .el-form-item__content {
        height: 32px;
      }
    }
  }
}

.header {
  width: 100%;
  height: 40px;
  color: #434343;
  padding-left: 16px;
  background: var(--sa-table-striped);
  margin: 24px 0 16px 0;
  font-weight: 500;
  font-size: 14px;
}

//商品形式
.goodstype {
  width: 140px;
  height: 56px;
  border-radius: 4px;
  position: relative;
}

.badge {
  color: var(--el-color-primary);
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  font-weight: 600;
  font-size: 14px;
  position: absolute;
  top: -8px;
  right: -8px;
}

//提示文本
.warning-title {
  color: #faad14;
  font-size: 12px;
  line-height: 16px;
  margin-left: 16px;
}

.add-category {
  color: var(--el-color-primary);
  font-size: 14px;
  line-height: 16px;
}

//警告图标
.icon-warning {
  width: 14px;
  height: 14px;
  display: flex;
  margin-left: 8px;
}

//精确图片
.sales-hover-img {
  width: 220px;
  height: 98px;
  display: flex;
}

.stock-hover-img {
  width: 220px;
  height: 74px;
  display: flex;
}

//批量操作
.batch {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--sa-border);
  border-top: none;
  font-size: 12px;
  color: var(--sa-subtitle);

  .batch-title {
    margin-left: 12px;
    color: var(--el-color-primary);
    cursor: pointer;
  }

  .batch-cancle {
    margin-left: 8px;
    color: var(--sa-subfont);
  }
}

:deep() {
  //步骤条
  .el-step__head {
    display: none;
  }

  .el-step.is-simple:not(:last-of-type) .el-step__title {
    max-width: 100%;
  }

  .el-step__title.is-process {
    font-weight: 500;
    color: var(--el-color-primary);
  }

  .el-step__title.is-wait {
    font-weight: 500;
    color: var(--sa-font);
  }

  .el-step.is-simple .el-step__arrow::before {
    transform: rotate(-45deg) translateY(-3px);
    height: 9px;
  }

  .el-step.is-simple .el-step__arrow::after {
    transform: rotate(45deg) translateY(3px);
    height: 9px;
  }

  .el-steps--simple {
    background: var(--sa-table-header-bg);
  }

  .server {
    .el-form-item__content {
      width: 100%;
    }

    .el-button {
      border-radius: 0 4px 4px 0;
      background: var(--sa-table-header-bg);
    }

    .el-select__tags {
      padding-left: 12px;

      .el-tag {
        background: var(--sa-table-header-bg);
      }
    }
  }
}

img {
  width: 100%;
  height: 100%;
}

.success {
  color: red;
}

.sku-wrap {
  width: 100%;
  border: 1px solid #d9d9d9;
  padding: 8px;
  box-sizing: border-box;

  .sku {
    width: 100%;
    min-height: 100px;

    .sku-key {
      width: 100%;
      height: 40px;
      color: var(--sa-subtitle);
      padding: 0 16px;
      background: var(--sa-table-header-bg);
      font-size: 14px;

      .sku-key-input {
        width: 120px;
      }

      .sku-key-icon {
        color: var(--el-color-primary);
      }
    }

    .sku-value {
      padding: 12px 0 0 30px;
      font-size: 14px;
      color: var(--sa-subtitle);

      .sku-value-title {
        height: 32px;
      }

      .sku-value-box {
        position: relative;
        margin-right: 24px;

        .sku-value-input {
          width: 104px;
        }

        .sku-value-icon {
          position: absolute;
          right: -8px;
          top: -8px;
          width: 16px;
          height: 16px;
          color: var(--el-color-primary);
        }
      }

      .sku-value-add {
        width: 104px;
        height: 32px;
        font-size: 14px;
        color: var(--el-color-primary);
      }
    }
  }

  .sku-tools {
    width: 100%;
    height: 40px;
    color: #434343;
    padding-left: 16px;
    background: var(--sa-table-header-bg);
    font-size: 12px;

    .add {
    }
  }
}

.alledit-input {
  margin-bottom: 10px;
}

.sku-table-wrap {
  width: 100%;
  overflow: auto;
  margin-top: 16px;

  .sku-table {
    width: 100%;
    border: 1px solid var(--sa-border);

    tbody {
      font-size: 12px;
    }

    th {
      font-size: 12px;
      color: var(--subtitle);
      height: 32px;
      line-height: 1;
      padding-left: 12px;
      box-sizing: border-box;
      text-align: left;

      .sku-table-header-title {
        margin-right: 10px;
      }

      .th-title {
        font-size: 12px;
        color: var(--subtitle);
        font-weight: bold;
      }
    }

    td {
      min-width: 88px;
      padding: 0 10px;
      height: 40px;
      box-sizing: border-box;

      &.image {
        min-width: 48px;
      }

      &.stock {
        min-width: 138px;
      }

      &.stock_warning {
        min-width: 168px;

        .sku-stock-switch {
          margin-right: 10px;
        }
      }

      &.sn {
        min-width: 116px;
      }
    }
  }
}

.batch-icon {
  width: 12px;
  height: 12px;
  margin-left: 10px;
  color: var(--el-color-primary);
}
</style>
<style lang="scss">
.popper-category {
  // width: 350px;
  padding: 10px !important;

  .el-cascader-panel {
    overflow: auto;
  }

  .el-tooltip__trigger {
    position: relative;
    max-width: 360px;
    width: 100%;
  }
}

.category-content {
  position: relative;
  max-width: 360px;
  width: 100%;

  .category-tag {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 76px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-wrap: wrap;
    line-height: normal;
    text-align: left;
    box-sizing: border-box;

    .el-tag {
      margin: 2px 0 2px 6px;
    }
  }
}

.category-tag-wrap {
  flex: 1;
  min-height: 32px;
  padding-right: 12px;
  border-radius: 4px;
  border: 1px solid var(--sa-border);
  cursor: pointer;
  position: relative;
}

.category-tag-wrap .el-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 2px 0 2px 6px;
  text-overflow: ellipsis;
}

.category-tag-wrap-suffix {
  width: 12px;
  height: 100%;
  position: absolute;
  right: 6px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-tag-wrap-suffix .circle-close {
  display: none;
}

.category-tag-wrap-suffix.is-active:hover .circle-close {
  display: block;
}

.category-tag-wrap-suffix.is-active:hover .arrow-down {
  display: none;
}

.service-box {
  .service-box-item {
    width: 100%;
    border: 1px solid #eee;
    border-radius: 5px;

    .service-title {
      padding: 18px 20px 18px;
      background-color: #f0f0fd;
    }

    .service-content {
      padding: 10px 20px;

      .service-left {
        margin-right: 30px;
      }

      .service-right {
        flex: 1;

        .service-right-1 {
          padding: 10px;
          background-color: #f9f9f9;
          border-radius: 5px;

          .service-right-1-name {
            width: 100px;
          }
        }
      }
    }
  }
}
</style>
